<script setup>
import * as echarts from 'echarts'
import {ref,onMounted} from 'vue'

let charts = ref()  // 获取 组件实例

onMounted(()=>{
    // 初始化echarts
    let mycharts = echarts.init(charts.value)
    mycharts.setOption({
        title:{
            text:'游客量对比',
            textStyle:{
                color:'#29fcff',    
            },
            left:'center', 
        },
        xAxis:{
            // show:true,min:0,max:100,
            type:'category',
            data:['重庆','广州','三亚','海南','鼓浪屿','苏州','杭州','江南','西湖']  // x轴显示的坐标数据
        },
        yAxis:{
            show:true,
            splitLine:{show:false},  // 关闭分割线的显示
            // type:'category'
            axisLine:{  // 显示y轴轴线
                show:true,
                // lineStyle:{  // 设置轴线的样式
                //     color:'white',
                //     width:3,
                // },
            },
            
        },
        tooltip: {  // 提示信息配置
            show:'true',
            axisPointer:{
                type:'cross',
                label:{
                    show:true,
                    formatter:'{value}',  // 格式化在轴线上要显示的内容 value是轴线上的名字
                    fontSize:16,
                }
            },
            // 格式化提示信息，默认使用html渲染，变量{b}是x轴上的值，变量{c}是y轴上的值
            formatter:'地名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;旅游指数<br/><span style="color:#008282;font-weight:bolder">{b}：&nbsp;&nbsp;&nbsp;&nbsp;{c}</span>',  // 提示框文本
            textStyle:{
                fontSize:20,
            }
        },
        series:[
            {
                // type:'scatter',
                type:'effectScatter',
                data:[33,88,21,45,35,67,28,78,99,54,64,78],
                // symbol:'',  // 设置散点图的样式
                symbolSize:10,
                label:{  // 标签
                    show:true,
                    position:'top',
                    fontSize:16,
                    color:'#cfffff'
                },
                barWidth:'20px',z:100,
                itemStyle:{
                    color:'Cyan',
                    borderRadius:20
                },
                rippleEffect: { //涟漪特效
                    period: 8, //动画时间，值越小速度越快
                    brushType: 'stroke', //波纹绘制方式 stroke, fill
                    scale: 5 //波纹圆环最大限制，值越大波纹越大
                },
            },
        ],
        // 布局配置
        grid:{left:'10%',right:'10%',top:'20%',bottom:'10%'},
    })
})
</script>

<template>
    <div class="box7">
        <div class="title">
            <p>年度游客量对比</p>
            <img src="/public/img/screen/dataScreen-title.png" alt="">
        </div>
        <div class="charts" ref="charts"></div>
    </div>
</template>

<style scoped lang="scss">
.box7 {
    width: 100%;
    height: 100%;
    // background-color: red;
    background: url('/public/img/screen/dataScreen-main-cb.png') no-repeat;
    background-size: 100% 100%;
    color: rgb(74, 243, 243);
    font-size: 16px;
    margin: 20px 0;
    .title {
    }

    .charts {
        width: 100%;
        height: calc(100% - 30px);
    }
}
</style>